<!DOCTYPE html>
<html>
<head>
    <title>jquery.fileupload.js使用测试</title>
    <script src="/js/jquery-1.12.0.min.js"></script>
    <script src="/js/jquery.ui.widget.js"></script>
    <script src="/js/jquery.iframe-transport.js"></script>
    <script src="/js/jquery.fileupload.js"></script>
    <script src="/js/jquery.xdr-transport.js"></script>
    <style type="text/css">
        .bar {
            margin-top:10px;
            height:10px;
            max-width: 300px;
            background: green;
        }
    </style>
</head>
<body>
<div style="margin-top:20px;">
    <span>请上传：</span>
    <span style='color:blue;'>(支持'3gp','rmvb','flv','wmv','avi','mkv','mp4','mp3','wav'格式)</span>
</div>
<div style="margin-top:10px;">
    <form action="" name="" enctype="multipart/form-data">
        <input type="file" name="files" class="upinput" />
    </form>
</div>
<!-- 上传进度条及状态： -->
<div class="progress">
    <div class="bar" style="width: 0%;"></div>
    <div class="upstatus" style="margin-top:10px;"></div>
</div>
<!-- 预览框： -->
<div class="preview"></div>
</body>
</html>
<script type="text/javascript">
    $(".upinput").fileupload({
        url:"api/uploadVideo",//文件上传地址，当然也可以直接写在input的data-url属性内
        dataType: "json", //如果不指定json类型，则传来的json字符串就需要解析jQuery.parseJSON(data.result);
        done:function(e,data){
            //done方法就是上传完毕的回调函数，其他回调函数可以自行查看api
            //注意data要和jquery的ajax的data参数区分，这个对象包含了整个请求信息
            //返回的数据在data.result中，这里dataType中设置的返回的数据类型为json
            if(data.result.sta) {
                // 上传成功：
                $(".upstatus").html(data.result.msg);
                $(".preview").html("<embed src="+data.result.previewSrc+
                        " allowscriptaccess='always' allowfullscreen='true' wmode='opaque'"+
                        " width='480' height='400'></embed>");
            } else {
                // 上传失败：
                $(".progress .bar").css("width", "0%");
                $(".upstatus").html("<span style='color:red;'>"+data.result.msg+"</span>");
            }
        },
        progress: function (e, data) {//上传进度
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $(".progress .bar").css("width", progress + "%");
            $(".upstatus").html("正在上传...");
        }
    });
</script>